import {Component, ViewChild, ViewChildren, QueryList,
    OnInit, OnDestroy, Inject, AfterViewInit} from '@angular/core';
import { Observable } from 'rxjs/observable';


import {
    DIMENSION, PREVIEWPOS, HOLDERPOS, QUEUEPOS, Dimension, Coord
} from './models/dimension';
import { MatrixCmp } from './cmps/matrix.cmp';
import { TetriminoCmp } from './cmps/tetrimino.cmp';
import { SwapErrorCmp } from './cmps/swap-error';
import { MinoCmp } from './cmps/mino.cmp';
import { PreivewCmp } from './cmps/preview.cmp';
import { QueueCmp } from './cmps/queue.cmp';
import { GameSvc, GameState } from './svcs/game.svc';



@Component({
    moduleId: module.id,
    selector: 'th-tetris-game',
    templateUrl: 'game.cmp.html',
    styleUrls: ['game.cmp.css'],
    directives: [
        MatrixCmp, MinoCmp, TetriminoCmp, PreivewCmp, QueueCmp,
        SwapErrorCmp
    ],
    providers: [GameSvc]
})
export class GameCmp implements AfterViewInit {

    @ViewChild(MatrixCmp) matrix: MatrixCmp;
    @ViewChildren(TetriminoCmp) tetros: QueryList<TetriminoCmp>;

    get pauseLabel() {
        return this.game.state === GameState.Uninitialized ? null :
            this.game.paused ? "RESUME" : "PAUSE";
    }

    get startLabel() {
        return this.game.state === GameState.Uninitialized ? "START" : "RESTART";
    }

    constructor(
        private game: GameSvc,
        @Inject(DIMENSION) public dim: Dimension
    ) { }

    start() {
        let [current, shadow] = this.tetros.toArray();
        current.addShadow(shadow, this.matrix.matrix);
        this.game.start(this.matrix, current);
    }

    togglePause() {
        this.game.paused ? this.game.resume() : this.game.pause();
    }

    ngAfterViewInit() {

    }

}
